import React, { useMemo, useState } from "react";

//场景：视图中需要呈现的内容，是经过复杂且大量消耗性能的计算得来的
export default function Usememo(){
  let [x,setX]=useState(10),
      [y,setY]=useState(20);
  /* const computed=()=>{
    //经过复杂的计算
    console.log('计算中...')//虽然是依赖X，但是点击修改Y也会输出,因为每次数据更新视图会重新渲染(每次组件更新，函数重新执行)，没有计算缓存属性，可用useMemo解决这个问题
    return x;
  } */
  const cacheVal=useMemo(()=>{
    //经过复杂的计算
    console.log('计算中...')//只有依赖的x改变才会输出
    return x;
  },[x]);
  return <div>
    <span>{cacheVal}</span>
    <br></br>
    <span>{y}</span>
    <br/>
    <button onClick={()=>setX(x+1)}>修改X</button>
    <button onClick={()=>setY(y+1)}>修改Y</button>

  </div>
}